<script  lang="ts" setup name="Person">
import {reactive} from "vue";
let car = reactive({name:'奔驰',price:100})
let games = reactive([
  {id:1,name:'王者荣耀'},
  {id:2,name:'原神'},
  {id:3,name:'CSGO'},
])
let obj = reactive({
  a:{
    b:{
      c:666
    }
  }
})
function changePrice  (){
  car.price += 10
}
function changeGames (){
  games[2].name = 'CSGO2'
}
function changeObj (){
  obj.a.b.c = 999
}

</script>

<template>
  <div class="prisonBox">
    <div>汽车的信息：汽车的名字{{car.name}}，汽车的价格{{car.price}}万</div>
    <button @click="changePrice">修改汽车的价格</button>
    <hr>
    <ul>
      游戏列表
      <li v-for="item in games" :key="item.id">名称：{{item.name}}</li>
    </ul>
    <button @click="changeGames">修改游戏</button>
    <div>{{obj.a.b.c}}</div>
    <button @click="changeObj">改变深层对象</button>
  </div>
</template>

<style scoped>
    .prisonBox{
      background-color:skyblue;
      padding: 20px;
      box-shadow: 0 0 10px;
      font-size: 20px;
      border-radius: 20px;
      button{
        margin: 0px 10px;
      }
    }
</style>